<template>
  <div class="home">
    <van-nav-bar fixed>
      <template #left>
        <van-image
          class="logo"
          :src="require('./af73ae023ca013435ebc1cb12c8b8f0.png')"
        />
      </template>
      <template #right>
        <van-button
          @click="$router.push('/search')"
          class="search"
          type="info"
          round
          size="small"
          icon="search"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <template>
      <van-tabs v-model="active">
        <!-- 导航渲染功能 -->
        <van-tab :title="item.name" v-for="item in channelistL" :key="item.id">
          <articlelist :id="item.id"></articlelist>
        </van-tab>
      </van-tabs>
      <!-- 导航三条杠 按钮 -->
      <div class="bar-btn" @click="showa = true">
        <van-icon name="wap-nav"></van-icon>
      </div>
    </template>
    <!-- 频道管理  -->
    <van-action-sheet v-model="showa" :style="{ height: '100%' }" title="标题">
      <div class="content">
        <channel @gl="gl" :active="active"></channel>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import articlelist from './articlelist.vue'
// import { getuserchan } from '../../api/chanles.js'
import channel from './components/channel-ed.vue'
import { mapActions, mapState } from 'vuex'
export default {
  components: {
    articlelist,
    channel
  },
  data() {
    return {
      showa: false,
      num: 10,
      active: 0,
      list: ''
    }
  },
  async created() {
    this.actions_channelist()
  },
  computed: {
    ...mapState('channel', ['channelistL'])
  },
  methods: {
    ...mapActions('channel', ['actions_channelist']),
    gl(index) {
      // console.log(index)
      this.active = index
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  width: 100vw;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;

  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1;
    .van-icon-wap-nav {
      font-size: 20px;
    }
  }

  .van-tabs {
    height: 100%;
    padding-top: 50px;
    ::v-deep {
      .van-tabs__wrap {
        position: fixed;
        left: 0;
        right: 30px;
        top: 46px;
      }
      .van-tabs__content,
      .van-tab__pane {
        height: 100%;
      }
      .van-tabs__line {
        background-color: #3196fa;
      }
    }
  }

  // 搜索按钮
  .search {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    .van-icon {
      color: #fff;
    }
  }
}
::v-deep {
  .logo .van-image__img {
    width: 100px;
  }
}
</style>
